<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/css/recharge.css">
    <title>充值</title>
</head>
<body>
    <div class="wrap">
        <div class="top">
            <p><span>余额：</span> ￥<span>200</span></p>
        </div>
        <div class="num"><input type="text" placeholder="充值类型或金额" value="充100送50"></div>
        <div class="main">
            <p>选择充值类型</p>
            <div class="typelist">
                <span onclick="pitchOn(event)" class="pitch-on">充100送50</span>
                <span onclick="pitchOn(event)">充1000送50</span>
                <span onclick="pitchOn(event)">充100送50</span>
                <span onclick="pitchOn(event)">充100送50</span>
                <span onclick="pitchOn(event)" id="custom">自定义</span>
            </div>
            <div>
            </div>
        </div>
        <div class="btn">
                <button>支  付</button>
        </div>
    </div>

    <script>
        function pitchOn(e){
            var spanlist = document.querySelectorAll('.typelist span')
            for(let item of spanlist){
                item.className  = ''
            }
            e.srcElement.className  = 'pitch-on'
            if(e.srcElement.innerHTML!='自定义'){
                document.querySelector('.num input').value = e.srcElement.innerHTML
            }else{
                document.querySelector('.num input').value = ''
                document.querySelector('.num input').placeholder = '请输入充值金额'
            }
        }
    </script>
    
</body>
</html>